<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* 第一种方法：使用flex布局 */
      /* .box {
          margin: 250px auto;
          width: 600px;
          height: 300px;
          background-color: blueviolet;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .content {
          background-color: red;
        } */

      /* 第二种方法：定位和transform */
      /* .box {
          margin: 250px auto;
          width: 600px;
          height: 300px;
          background-color: blueviolet;
          position: relative;
        }
        .content {
          background: red;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        } */

      /* 第三种：grid布局 */
      .box {
        margin: 150px auto;
        display: grid;
        height: 600px;
        width: 600px;
        background: orange;
      }
      .content {
        display: inline-block;
        align-self: center;
        justify-self: center;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="content">
        <h2>我是王伟伦</h2>
      </div>
    </div>
    <button>点击我提示</button>
  </body>
</html>
<script>
  // 5.让一个字符串的首字母大写，比如" hello every one " ==>  "Hello every one"
  //   var str = 'hello every one'; // 创建一个变量，用来存储要处理的字符串
  //   var str1 = str[0].toLocaleUpperCase(); // 让字符串的第一个字母大写，并且赋值给str1
  //   str = str.slice(1); // 截取掉原字符串的第一个字母
  //   str1 += str; // 将截取过后的字符串 和 大写字母做一个拼接操作
  //   console.log(str1);

  // 6.让一个字符串所有的单词首字母大写  "hello every one"  ==>  "Hello Every One"
  //   function titleCase(str) {
  //     var newarr;
  //     var newarr1 = [];
  //     newarr = str.toLowerCase().split(' ');
  //     for (var i = 0; i < newarr.length; i++) {
  //       newarr1.push(newarr[i][0].toUpperCase() + newarr[i].substring(1));
  //     }
  //     console.log(newarr1.join(' '));
  //   }
  //   titleCase('hello every one');

  // 7.数组去重的三种方法
  //   var arr = ['a', 'a', 'a', 'b', 'b', 'c', 'c', 'v', 'f'];

  // 方法一：set方法
  //   let setarr = new Set();
  //   arr.forEach((v) => {
  //     setarr.add(v);
  //   });
  //   console.log(Array.from(setarr));

  // 方法二：过滤  filter
  //   let newarr = arr.filter((v, index, self) => {
  //     return index == self.indexOf(v);
  //   });
  //   console.log(newarr);

  // 方法三：forEach循环
  //   let obj = {};
  //   arr.forEach((v) => {
  //     if (!obj[v]) {
  //       obj[v] = true;
  //     }
  //   });
  //   console.log(Object.keys(obj));

  // 8.封装一个myNew函数实现new操作符,如下,让p1和p2有一样的效果
  //   function myNew(constr, ...args) {
  //     // 创建一个对象obj，将obj的__proto__属性指向构造函数的原型对象
  //     // 即实现：obj.__proto__ === constructor.prototype
  //     var obj = Object.create(constr.prototype);
  //     // 将constrc内部的this指向obj，并执行
  //     var result = constr.apply(obj, args);
  //     // 如果构造函数返回的是对象，就使用构造函数执行的结果。否则，返回新创建的对象
  //     return result instanceof Object ? result : obj;
  //   }
  //   function Person(name, age) {
  //     this.name = name;
  //     this.age = age;
  //   }
  //   const person1 = myNew(Person, '王伟伦', 20);
  //   console.log(person1);

  //   9. 让一个不定宽高的元素在容器中水平垂直居中的方式
  //   见上面的HTML和CSS

  //   10. 给按钮绑定点击事件,频繁点击按钮时让事件最少间隔1s才能触发一次
  // 方式一：
  // var btn = document.querySelector('button');
  // //防抖函数
  // function debounce(fn, delay) {
  //   console.log(fn);
  //   var timer;
  //   return function () {
  //     clearTimeout(timer);
  //     if (!timer) {
  //       console.log('2s了');
  //       fn();
  //     }
  //     timer = setTimeout(function () {
  //       timer = null;
  //     }, delay);
  //   };
  // }
  // btn.onclick = debounce(function () {
  //   alert('你是大帅哥！');
  // }, 2000);

  // 方式二，通过css过渡禁用按钮2s,通过:active去触发transition变化，然后通过监听transition回调去动态设置按钮的禁用状态

  //什么是事件流?什么是事件机制?
  /*
    事件流：
    事件流就是处理事件的顺序
    事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
    事件冒泡：事件开始由具体的元素接收，然后逐步向外传播，直到DOM最顶层的节点的过程
    事件捕获：由DOM最顶层的节点开始，然后逐级向内传播到具体的元素接收的过程

    事件机制：
    当我们的行为满足了一定的条件后，会触发某个事件的执行
*/
</script>
